<template>
  <div>
    <van-sticky>
      <van-row style="background:#fff">
        <van-col span="6">
          <img class="logoImg" src="@/assets/img/logo.webp" alt />
        </van-col>
        <van-col span="13" style="margin:0.3rem 0.15rem">
          <search></search>
        </van-col>
        <van-col span="4">
          <van-button class="loginClass" size="small" type="primary">登录</van-button>
        </van-col>
      </van-row>
      <van-tabs v-model="active">
        <van-tab v-for="(item,index) in tabList" :key="index" :title="item"></van-tab>
      </van-tabs>
    </van-sticky>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in bannerList" :key="index">
        <img :src="item" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar :text="tongzhi" left-icon="volume-o" />
    <van-row>
      <van-col style="text-align:center;margin-top:.2rem" span="8">
          <span>网易自营品牌</span>
      </van-col>
      <van-col style="text-align:center;margin-top:.2rem" span="8">
          <span>30天无忧退货</span>
      </van-col>
      <van-col style="text-align:center;margin-top:.2rem" span="8">
          <span>48小时快速退款</span>
      </van-col>
    </van-row>
    <van-grid :column-num="5">
      <van-grid-item v-for="(item,index) in GridList" :key="index">
        <img :src="item.url" width="100%" />
        <span style = "margin-top:0.1rem;font-size:0.3rem">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <van-row style="background:#eee;height:3rem;padding:0.5rem 0 0.5rem 0">
        <van-col :span = "12" style="text-align:center">
            <img src="@/assets/img/kouzhao.webp" alt="" width="80%">
        </van-col>
        <van-col :span = "12" style="text-align:center">
            <img src="@/assets/img/kouzhao2.webp" alt="" width="80%">
        </van-col>
    </van-row>
    <van-row style="background:#eee;height:3rem;padding:0.5rem 0 0.5rem 0">
        <van-col :span = "12" style="text-align:center">
            <img src="@/assets/img/kouzhao.webp" alt="" width="80%">
        </van-col>
        <van-col :span = "12" style="text-align:center">
            <img src="@/assets/img/kouzhao2.webp" alt="" width="80%">
        </van-col>
    </van-row>
    <van-row style="background:#eee;height:3rem;padding:0.5rem 0 0.5rem 0">
        <van-col :span = "12" style="text-align:center">
            <img src="@/assets/img/kouzhao.webp" alt="" width="80%">
        </van-col>
        <van-col :span = "12" style="text-align:center">
            <img src="@/assets/img/kouzhao2.webp" alt="" width="80%">
        </van-col>
    </van-row>
    <!-- 新人专想礼盒 -->
    <!-- 底部 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item
        replace
        :to="item.url"
        v-for="(item,index) in tabbarList"
        :key="index"
        icon="home-o"
      >{{item.name}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import search from "@/components/search";
export default {
  name: "",
  components:{search},
  data() {
    return {
      value: "",
      active: 1,
      bannerList: [
        "https://yanxuan.nosdn.127.net/b3782def13e1fbba9f08bf8545be15d0.png?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/a71f0ae8d65206cee78095cdf9fc9af5.png?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/a787a84725a6bfc0a08f5eb83347cf93.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/19b08524cc5b16fb79a4dff89e8529d6.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
      ],
      tabList: [
        "居家生活",
        "旅游前行",
        "洗脚按摩",
        "家政服务",
        "精油护体",
        "老衲指压"
      ],
      GridList: [
        {
          url:
            "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png",
          name: "新品首发"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png",
          name: "居家生活"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",
          name: "服饰鞋包"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png",
          name: "合肥推拿"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png",
          name: "精油护体"
        },

        {
          url:
            "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png",
          name: "服务服务"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png",
          name: "旅游外出"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png",
          name: "私人影院"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png",
          name: "洗脚按摩"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/12e8efd15b9b210ab156a7ee9b340548.gif",
          name: "KTV"
        }
      ],
      tongzhi: "欢迎新老顾客，为庆祝疫情结束特此通知，所有服务八点八折！",
      tabbarList: [
        {name:'首页',url:'/index'},
        {name:'分类',url:'/classify'},
        {name:'值得买',url:'/'},
        {name:'购物车',url:'/shopCat'},
        {name:'个人中心',url:'/personal'}]
    };
  },
  methods: {},
  created() {}
};
</script>
<style scoped>
.logoImg {
  width: 2rem;
  margin: 0.4rem;
}
.loginClass {
  margin-top: 0.3rem;
}
.mySearch{
  
}
</style>;